<template>
  <div
    class="item"
    :style="{ height: 'calc((430px + 30px*' + areasNum + ')/3)' }"
  >
    <div class="sub-title">
      {{ qqmddList.region }}
    </div>
    <div class="con">
      <template v-for="item in qqmddList.char">
        <div class="area" v-for="(area, index) in item.areas" :key="area.cName">
          <div class="col-char" v-if="index == 0">
            {{ item.letter }}
          </div>
          <div class="en">
            <p>
              {{ area.cName }}&nbsp;<span>{{ area.eName }}</span>
            </p>
            <i v-if="area.hot" class="el-icon-s-promotion"></i>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "mdd_qqList",
  data() {
    return {};
  },
  props: {
    qqmddList: {},
  },
  computed: {
    areasNum() {
      let num = 0;
      let i = null;
      let j = null;
      for (i in this.qqmddList) {
        if (i == "char") {
          for (j of this.qqmddList[i]) {
            num += j.areas.length;
          }
        }
      }
      return num;
    },
  },
  components: {},
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  flex-direction: column;
  .sub-title {
    padding: 15px 0;
    font-size: 20px;
    flex-shrink: 0;
  }
  .con {
    height: calc(100% - 55px);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: baseline;
    .area {
      position: relative;
      padding-left: 35px;
      padding-right: 20px;
      width: 32%;
      box-sizing: border-box;
      font-size: 14px;
      .col-char {
        position: absolute;
        left: 0;
        top: 5px;
        width: 25px;
        text-align: center;
        font-family: Centaur, Times New Roman;
        font-size: 20px;
      }
      .en {
        display: flex;
        align-items: center;
        min-height: 30px;
        p {
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
        i {
          font-size: 16px;
          padding-left: 8px;
          color: #ff9d00;
        }
      }
    }
  }
}
</style>